<script setup>
import { computed, ref, onBeforeMount, watch } from "vue";
import nodeMixin from "../NodeMixin.js";
import { roleList, unitFormList } from '../../../../../../../../api/system/authority'
import { listByParentArr } from '../../../../../../../../api/login'
import { fileListAll, listHandlerOption,listMasterStatus,msgTemplate} from '../../../../../../../../api/system/flowPath'
const props = defineProps({
  ...nodeMixin.props,
  processData: {
    type: Array,
    default: () => {
      return []
    }
  },
  nodeConfVisible: {
    type: Boolean,
    default: true
  }
})
const ruleOne = ref([])
const list = ref([])
const ruleTwo = ref([])
const ruleTree = ref([])
const form=ref()
const options = ref({
  nodeCategory: [//节点分类
    {
      label: '保前',
      value: '1',
    },
    {
      label: '保后',
      value: '2',
    },
  ],
  crossDept: [//是否跨部门
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  batchApprove: [//是否批量审批
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  isCustomOperator: [//是否自选操作人员
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  isPreRelease: [
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  isApplyRefund: [
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  isLastInspect: [
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  isAudit:[
  {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  canBack:[
  {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  skipStop:[
  {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  roleId: [],
  unitId: [],
  ruleOne: [],
  ruleTwo: [],
  ruleTree: [],
  fileTemplateIds: [],
  // customOperator:[],
  jumpNodeCode: [],
  nodeIdent:[],
  handler:[],
  msgTempIds:[],
  isExpand:[
  {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
})
const fields = ref([
  {
    label: "节点名称",
    prop: 'name',
    placeholder: '请输入',
    type: 'input',

  },
  {
    label: "表单池",
    prop: 'unitId',
    placeholder: '请选择表单池',
    type: 'select',
    bindLabel: 'name',
    bindValue: 'id',
    filterable: true,
  },
  // {
  //   label: "",
  //   prop: 'expression',
  // },
  {
    label: "文件模版",
    prop: 'fileTemplateIds',
    placeholder: '请选择',
    type: 'select',
    bindLabel: 'name',
    bindValue: 'id',
    multiple: true,
  },
  {
    label: "通知类型",
    prop: 'msgTempIds',
    placeholder: '请选择',
    type: 'select',
    bindLabel: 'name',
    bindValue: 'id',
    multiple: true,
  },
  {
    label: "规定完成时限",
    prop: 'timeLimit',
    placeholder: '请输入',
    type: 'number',
    unit: '天'
  },
  {
    label: "节点状态标识",
    prop: 'nodeIdent',
    placeholder: '请选择',
    type: 'select',
    bindLabel: 'masterStatusDesc',
    bindValue: 'masterStatus',
  },
  {
    label: "业务执行器",
    prop: 'handler',
    placeholder: '请选择',
    type: 'select',
    bindLabel: 'name',
    bindValue: 'handler',
  },
  // {
  //   label: "跳转节点",
  //   prop: 'jumpNodeCode',
  //   placeholder: '请选择',
  //   type: 'select',
  //   bindLabel: 'name',
  //   bindValue: 'id',
  // },
  {
    label: "节点分类",
    prop: 'nodeCategory',
    placeholder: '请输入',
    type: 'radio',

  },
  // {
  //   label: "是否跨部门",
  //   prop: 'crossDept',
  //   placeholder: '请输入',
  //   type: 'radio',

  // },
  {
    label: "是否批量审批",
    prop: 'batchApprove',
    placeholder: '请输入',
    type: 'radio',

  },
  {
    label: "是否提前解保",
    prop: 'isPreRelease',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "是否申请退费",
    prop: 'isApplyRefund',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "是否结束保后检查",
    prop: 'isLastInspect',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "是否为审批节点",
    prop: 'isAudit',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "是否可回退",
    prop: 'canBack',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "是否跳过暂停",
    prop: 'skipStop',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "是否发起展期",
    prop: 'isExpand',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "是否自选操作人员",
    prop: 'isCustomOperator',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "操作角色",
    prop: 'roleId',
    placeholder: '请选择',
    type: 'select',
    bindLabel: 'roleName',
    bindValue: 'id',
    disabled: false,
  },
 
  // {
  //   label: "操作人",
  //   prop: 'customOperator',
  //   placeholder: '请选择',
  //   type: 'select',
  //   bindLabel: 'name',
  //   bindValue: 'id',
  //   multiple:true,
  //   disabled:true,
  // },
])
const rules = ref({
  name: [
    { required: true, message: '请输入节点名称', trigger: 'blur' },
  ],
  unitId: [
    { required: true, message: '请选择表单池', trigger: 'change' },
  ],

  timeLimit: [
    { required: true, message: '请输入完成时限', trigger: 'blur' },
    { pattern: /^[1-9]\d*$/, message: '请输入整数' }
  ],
  nodeCategory: [
    { required: true, message: '请选择节点分类', trigger: 'change' },
  ],
  nodeCategory: [
    { required: true, message: '请选择节点分类', trigger: 'change' },
  ],
  handler: [
    { required: true, message: '请选择节点状态标识', trigger: 'change' },
  ],
  // fileTemplateIds: [
  //   { required: true, message: '请选择文件模版', trigger: 'change' },
  // ],
  nodeIdent: [
    { required: true, message: '请选择节点状态标识', trigger: 'change' },
  ],
  crossDept: [
    { required: true, message: '请选择是否跨部门', trigger: 'change' },
  ],
  batchApprove: [
    { required: true, message: '请选择是否批量操作', trigger: 'change' },
  ],
  isCustomOperator: [
    { required: true, message: '请选择是否自选操作人员', trigger: 'change' },
  ],
  isPreRelease: [
    { required: true, message: '请选择是否提前解保', trigger: 'change' },
  ],
  isApplyRefund: [
    { required: true, message: '请选择是否申请退费', trigger: 'change' },
  ],
  isExpand: [
    { required: true, message: '请选择是否发起展期', trigger: 'change' },
  ],
  isLastInspect: [
    { required: true, message: '请选择是否结束保后检查', trigger: 'change' },
  ],
  roleId: [
    { required: true, message: '请选择操作角色', trigger: 'change' },
  ],
  // customOperator: [
  //   { required: false, message: '请选择操作人', trigger: 'change' },
  // ],
})
function handleProps(arr) {
  arr.map(item => {
    if (item.name != '网关节点') {
      if (item.props) {
        options.value.jumpNodeCode.push({ id: item.id, name: item.props.name })
      }
    }
    if (item.props) {
      if (item.props.branch) {
        handleProps(item.props.branch)
      }
    }
    if (item.branch) {
      if (item.branch.length > 0) {
        item.branch.map(item1 => {
          if (item1.length > 0) {
            handleProps(item1)
          }
        })
      }
    }
  })
}
function getData() {
  // handleProps(props.processData)

  roleList().then(res => {
    options.value.roleId = res
  })
  unitFormList().then(res => {
    options.value.unitId = res
  })

  listByParentArr({ ids: ['NODE_TRIGGER_1', 'NODE_TRIGGER_2', 'NODE_TRIGGER_3'] }).then(res => {
    ruleOne.value = res.NODE_TRIGGER_1
    ruleTwo.value = res.NODE_TRIGGER_2
    ruleTree.value = res.NODE_TRIGGER_3
  })
  fileListAll().then(res => {
    options.value.fileTemplateIds = res
  })
  listMasterStatus().then(res=>{
    res.map(item=>{
      item.masterStatus=String(item.masterStatus)
    })
   options.value.nodeIdent=res
  })
  listHandlerOption().then(res=>{
    options.value.handler=res
  })
  msgTemplate({page:1,pagesize:10000000}).then(res=>{
    options.value.msgTempIds = res.records.filter(item => {
      return item.deleted == 0
    })
  })
  // if(_value.value.props.isCustomOperator == '1'){
  //   fields.value[13].disabled = true
  // }
  
}
onBeforeMount(() => {
  getData()
  handleSelect('isCustomOperator')
})
const emit = defineEmits(nodeMixin.emits)
const _value = computed(nodeMixin.computed._value(props, emit))
function handleSelect(prop) {
  if (prop == 'isCustomOperator') {
    if (_value.value.props.isCustomOperator == '0') {
      _value.value.props.customOperator = []
      fields.value[17].disabled = false
      rules.value.roleId[0].required=true
    } else {
      _value.value.props.roleId = ''
      fields.value[17].disabled = true
      _value.value.props.roleId= ''
      rules.value.roleId[0].required=false
    }
  }
}
function save(){
  form.value.verification().then(res=>{
    emit('close')
  })
}
watch(() => props.nodeConfVisible, (newValue, oldValue) => {
  // 当isActive变化时，更新localIsActive的值
  if (newValue) {
    getData()
    handleSelect('isCustomOperator')
  } else {
    options.value.jumpNodeCode = []
  }
});

</script>

<template>
  <div class="Approval">
    <div class="form_drawer">
      <myform :fields="fields" ref="form" @handleSelect="handleSelect" :model="_value.props" :rules="rules" labelPosition="top"
        :inline="false" :options="options">
      </myform>
    </div>
    <div class="d_f j_c_c">
        <el-button type="primary" @click="save" >保 存</el-button>
     </div>
  </div>
</template>

<style lang="scss">
.Approval {

  .el-input,
  .el-select {
    width: 100% !important;
  }

  .box {
    background: rgba(24, 120, 255, 0.02);
    width: 100%;
    padding: 10px;

    .label::before {
      color: #f56c6c;
      content: "*";
      margin-right: 4px;
    }

    .el-input,
    .el-select {
      width: 45% !important;
      height: 32px !important;
    }
  }

  .form_drawer {
    height: calc(100% - 70px);
    overflow-y: auto;
  }
}
</style>
